import React, {Component} from 'react';

/**
 * 官网例子
 * 2017-5-8 14:54:27
 */

// 小小计时器
class Timer extends Component {
  constructor(props) {
    super(props)
    this.state = {secondsElapsed: 0}
  }

  tick() {
    this.setState((prevState) => ({
      secondsElapsed: prevState.secondsElapsed + 1
    }));
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  render() {
    return (
        <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
    );
  }
}


// todolist
class TodoApp extends Component {
  constructor(props) {
    super()
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
    this.state = {
      items: [],
      text: ''
    }
  }

  handleChange(e) {
    this.setState({text: e.target.value});
  }

  handleSubmit(e) {
    e.preventDefault();
    var newItem = {
      text: this.state.text,
      id: Date.now()
    };
    this.setState((prevState) => ({
      items: prevState.items.concat(newItem),
      text: ''
    }));
  }

  render() {
    return <div>
      <TodoList items={this.state.items}/>
      <form onSubmit={this.handleSubmit}>
        <input onChange={this.handleChange} value={this.state.text}/>
        <button>{'Add #' + (this.state.items.length + 1)}</button>
      </form>
    </div>
  }
}

class TodoList extends Component {
  render() {
    return (
        <ul>
          {this.props.items.map(item => (
              <li key={item.id}>{item.text}</li>
          ))}
        </ul>
    );
  }
}


class Cici extends Component {
  render() {
    return (
        <div className="cici">
          <Timer/>
          <TodoApp/>
        </div>
    );
  }
}

export default Cici;
